<template>
  <div class="shop">
    <el-button-group>
      <!-- <el-button @click="changeStatus(1)">全部</el-button> -->
      <el-button @click="changeStatus(1)">已上架</el-button>
      <el-button @click="changeStatus(0)">已下架</el-button>
    </el-button-group>

    <div class="search">
      <div class="search_btn">
        <el-input class="input" v-model="form.keywords" placeholder="输入商品或小店名称搜索" clearable></el-input>
        <el-button type="primary" @click="searchShopMin">搜索</el-button>
      </div>
    </div>

    <el-table
      :data="tableData"
      class="explosive_table"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="productId" label="商品ID" ></el-table-column>
      <el-table-column label="图片" width="160" >
        <template slot-scope="scope">
          <div>
            <img
              :key="scope.row.id"
              style="width:100px;"
              :src="scope.row.listImgUrl ? scope.row.listImgUrl : errorImg"
              alt
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="名称">
        <template slot-scope="scope">
          <p class="shop_title">{{scope.row.title}}</p>
          <!-- <p>{{scope.row.description}}</p> -->
        </template>
      </el-table-column>
      <el-table-column prop="sellerName" label="所属小店" ></el-table-column>
      <el-table-column prop="price" label="商品售价/零售价/会员价" width="180">
        <template slot-scope="scope">￥{{scope.row.price}} / ￥{{scope.row.minSalePrice}} / ￥{{scope.row.memberPrice}}</template>

      </el-table-column>
      <el-table-column prop="num" label="总库存/冻结数" >
        <template slot-scope="scope">{{scope.row.inventory}}/{{scope.row.holdInventory}}</template>
      </el-table-column>
      <el-table-column label="上架状态" >
        <template slot-scope="scope">
          <!-- <el-switch  v-if='scope.row.product_status == 1'
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="15"
            :value="scope.row.product_status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch> -->
          <!-- <p class="status—desc" v-if="scope.row.on_sale==1">审核中</p>
          <p class="status—desc" v-if="scope.row.on_sale==5">售卖中</p>
          <p class="status—desc" v-if="scope.row.on_sale==10">驳回</p>
          <p class="status—desc" v-if="scope.row.on_sale==15">已下架</p> -->
          <p class="status—desc">{{scope.row.statusText}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作"  fixed="right" width="260">
        <template slot-scope="scope">
          <el-button size="mini" @click="openShopMinDetail(scope.row.id)">查看</el-button>
          <el-button size="mini" @click="update(scope.row.id)" v-if="scope.row.status == 1">下架</el-button>
          <el-button size="mini" type="danger" @click="deleteShopMin(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

   <jdialog
      title="商品信息"
      :visible.sync="isShowDetail"
      width="640px">
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品图片:</el-col>
        <el-col :span="21">
          <!-- <uploadImg 
            :canEdit="false"
            flieName="shopadministration_pic_list"
            :n="10"
            :oldImgs="img_url"
            @getFile="getFile"
          ></uploadImg> -->
          <img
              
              style="width:100px;"
              :src="productDetail.listImgUrl"
              alt
            />
          <!-- <div class="img_main" v-show="img_url.length">主图</div> -->
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品名称:</el-col>
        <el-col :span="8">
          <el-input :disabled="true" placeholder v-model="productDetail.title"></el-input>
        </el-col>
      </el-row>
     
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品原价:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.price"
            @change="changeGoodsPrice"
            :min="0"
            :disabled="true"
          ></el-input-number>
        </el-col>

        <el-col :span="3">零售价:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.sellerName"
            @change="changeGoodsPrice"
            :min="0"
            :disabled="true"
            
          ></el-input-number>
        </el-col>
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">会员价:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.memberPrice"
            @change="changeGoodsPrice"
            :min="0"
            :disabled="true"
          ></el-input-number>
        </el-col>

        <!-- <el-col :span="3">返红包数:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.red_packet_price_yuan"
            @change="changeGoodsPrice"
            :min="0"
        
            
          ></el-input-number>
        </el-col> -->
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">商品库存:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.inventory"
            @change="changeGoodsStock"
            :disabled="true"
            :min="1"
          ></el-input-number>
        </el-col>
        <el-col :span="3">冻结库存:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.holdInventory"
            @change="changeGoodsStock"
            :min="1"
            :disabled="true"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="4">用户购买限制:</el-col>
        <el-col :span="8">
          <el-input-number
            v-model="productDetail.buyAloneNum"
            @change="changeGoodsStock"
            :disabled="true"
           :min="1"
            :max="10000"
          ></el-input-number>
        </el-col>
      </el-row>
      <!-- <el-row class="goodsInfo_price">
        <el-col :span="3">商品简介:</el-col>
        <el-col :span="9">
          <el-input :disabled='true' placeholder v-model="productDetail.description" type="textarea" auotosize></el-input>
        </el-col>
      </el-row> -->

       <div  class="dialog-footer">
        <el-button size='mini' @click="isShowDetail = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="submitGoodsInfo">确 定</el-button>
      </div>
   </jdialog>
  </div>
</template>

<script>

import {productHot,hotProductDetail,hotProductOffLine,hotProductRemove} from "@/api/store"

export default {
  components: {
    // uploadImg
  },
  mounted() {
    this.getExplosiveProductListData();
  },
  data() {
    return {
      //展示详情
      isShowDetail: false,
      errorImg:'',
      form: {
        keywords: "",
        on_sale: "",
        page: 1
      },
      total: 0,
      tableData: [],
      //商品详情
      productDetail: {},
      //图片列表
      img_url: [],
      listQuery:{
        pageSize:20,
        pageNum:1,
        sellerId:0,
        status:1
      }
    };
  },
  methods: {
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    // 下架
    update(id){
      hotProductOffLine({id:id}).then(res=>{
        if (res.code === 200) {
        this.$message.success("上架商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
      })
    },
    changeStatus(e) {
      if (e === 1) {
        this.listQuery.status = 1;
      } else if (e === 2) {
        this.listQuery.status = 2;
      } else {
        this.listQuery.status = 0;
      }
      //重新获取小店商品管理列表
      this.getExplosiveProductListData();
    },
    //获取商品列表
    async getExplosiveProductListData() {
      var url =
        "keywords=" +
        this.form.keywords +
        "&on_sale=" +
        this.form.on_sale +
        "&page=" +
        this.form.page;
      let res = await productHot(this.listQuery);
      console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    //根据关键词重新获取小店
    searchShopMin() {
      this.getExplosiveProductListData();
    },
    pageChange(page) {
      this.listQuery.pageNum = page;
      this.getExplosiveProductListData();
    },

    isUseActivityChange(id, e) {
      if (e === 15) {
        //下架
        this.getDownProductData(id);
      } else {
        //上架
        this.getUpProductData(id);
      }
    },
    //上架商品
    async getUpProductData(cid) {
      let res = await productUpExplosiveProduct({ id: cid });
      if (res.code === 10000) {
        this.$message.success("上架商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //下架商品
    async getDownProductData(cid) {
      let res = await productDownExplosiveProduct({ id: cid });
      if (res.code === 10000) {
        this.$message.success("下架商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //删除商品
    async getDeleteProductData(cid) {
      let res = await hotProductRemove(cid);
      if (res.code === 200) {
        this.$message.success("删除商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //查看详情
    openShopMinDetail(id) {
      this.isShowDetail = true;
      this.getproductDetailExplosiveInfoData(id);
    },

    //删除详情
    deleteShopMin(id) {
      this.$confirm("确定删除?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //移除小店
        this.getDeleteProductData(id);
      });
     
    },

    //商品详情
    async getproductDetailExplosiveInfoData(cid) {
      let res = await hotProductDetail(cid);

      this.productDetail = res.data;
      // this.img_url = res.data.pic_url ? res.data.pic_url.map(obj=>obj.product_pic_url) : []
      console.log(this.img_url)
    },
 
    //获取商品图片
    getFile(file) {
      if (file.files && file.files.length && file.name == 'shopadministration_pic_list') {
        this.img_url = file.files.map(obj=>obj.url)
      }
      console.log(this.img_url)
    },
    //改变商品原价
    changeGoodsPrice() {},

    //改变商品库存
    changeGoodsStock() {},

    //修改商品点击确定
    submitGoodsInfo() {
      this.getEditProductData();
    },

    //编辑商品
    async getEditProductData() {
     
       var form = {
        id: this.productDetail.id,
        limitPerNum: this.productDetail.limit_per_num,
        salePrice: this.productDetail.sale_price,
        stock: this.productDetail.stock,
        vip_price: this.productDetail.vip_price_yuan,
        red_packet_price: this.productDetail.red_packet_price_yuan
      };
      console.log(form);
      let res = await productEditExplosiveProduct(form);
      if (res.code === 10000) {
        this.$message.success("编辑成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
      this.isShowDetail = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    float: right;
    .input {
      width: 200px;
    }
  }
  .explosive_table{
    margin-top: 20px;
  }
  .shop_title {
    font-weight: 700;
  }
  .goodsInfo_price {
    margin-top: 20px;
    padding: 0 20px;
  }

  .pagination {
    float: right;
  }
  .status—desc {
    display: inline;
    margin-left: 5px;
  }

  .img_main {
    color: #ffffff;
    background-color: #f4222d;
    width: 60px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 10%;
    margin-left: 30px;
    // z-index: !important;
  }
   .dialog-footer{
    margin: 20px 0;
    text-align: center;
  }
}
</style>